/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
    Button,
    ToastAndroid,
    Image,
    ScrollView,
    TouchableOpacity,
    BackHandler,

} from 'react-native';
import BaseComponent from './BaseComponent';

var Dimensions = require('Dimensions');//获取屏幕的宽高信息
var {height, width} = Dimensions.get('window');


 class Main extends BaseComponent {

    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            path:0
        };

      }



    chanageNumber(e){
          var number = e.nativeEvent.contentOffset.x;
          var newpath = Math.round(number/width);
          this.setState({
              path:newpath
          })
    }

  render() {
    return (
      <View>
        <View style={styles.titlebar}>
	        <Text style={{
	        	fontSize:20,
				textAlign:'center',
				margin:10,
	        }}>下拉刷新下拉加载</Text>
        </View>
        <View style={styles.inputviw}>
            <TextInput style={styles.textinputstyle} placeholder={"用户名或者手机号"}/>
            <TextInput style={styles.textinputstyle} placeholder={"6到8为数字与字母的组合密码"} secureTextEntry={true}/>
            <Button style={styles.button1}
                    title="登陆"
                    accessibilityLabel="Ok, Great!"
                    onPress={onButtonPress}
                    titleTextColor={"#000000"}
            />

            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} pagingEnabled={true}
                        onMomentumScrollEnd={this.chanageNumber.bind(this)}>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
                <Image style={styles.img} source={require('./images/ic_banner.png')}/>
            </ScrollView>
            <View style={styles.numberview}>
                <Text style={[styles.number,this.state.path==0?styles.selwctview:null]}>&bull;</Text>
                <Text style={[styles.number,this.state.path==1?styles.selwctview:null]}>&bull;</Text>
                <Text style={[styles.number,this.state.path==2?styles.selwctview:null]}>&bull;</Text>
                <Text style={[styles.number,this.state.path==3?styles.selwctview:null]}>&bull;</Text>
                <Text style={[styles.number,this.state.path==4?styles.selwctview:null]}>&bull;</Text>
                <Text style={[styles.number,this.state.path==5?styles.selwctview:null]}>&bull;</Text>
                <Text style={[styles.number,this.state.path==6?styles.selwctview:null]}>&bull;</Text>

            </View>

        </View>
          <View style={styles.row1}>
              <View style={styles.left} >
                  <Text>{'lefe'}</Text>
              </View>
              <View style={styles.center} >
                  <Text>{'center'}</Text>
              </View>
              <View style={styles.right} >
                  <Text>{'right'}</Text>
              </View>
          </View>

          <TouchableOpacity>
              <View style={styles.mybutton}>
                  <Text style={styles.mytext}>{'按钮'}</Text>
              </View>
          </TouchableOpacity>

      </View>
    );
    function onButtonPress() {
        ToastAndroid.showWithGravity(
            '这是一个登陆的对话框',
            ToastAndroid.SHORT,
            ToastAndroid.CENTER,
        )
    }
  }


}

const styles = StyleSheet.create({

    mybutton:{
        width:90,
        height:30,
        justifyContent:'center',
        backgroundColor:'#00f000',
        paddingBottom:1,
        paddingTop:1,
        paddingLeft:10,
        paddingRight:10,
        borderRadius:3,

    },
    mytext:{
        fontSize:20,
        color:'#ffffff'
    },

    row1:{
        //flex:1,
        height:100,
        flexDirection:'row'
    },

    left:{
        flex:1,//这个属性相当与android中的权重
        backgroundColor:'#ff0000',
    },
    center:{
        flex:1,
        backgroundColor:'#ff00ff',
    },
    right:{
        flex:1,
        backgroundColor:'#ffff00'
    },

    selwctview:{
      color:'#ff00ff'
    },

  	titlebar:{
  		backgroundColor:'powderblue',
  		height:50,
  	},
  	root:{
  		backgroundColor:'#220000',

  	},
    inputviw:{
  	    marginTop:10
    }
    ,
    textinputstyle:{
  	    height:44,
        backgroundColor:'#fff',
        marginBottom:2,
        marginLeft:15,
        marginRight:15
    },
    button1:{
        marginTop:12,
        marginLeft:15,
        marginRight:15
    },

    img:{
  	    width:width,
        height:200,
    }
    ,
    numberview:{
  	    height:30,
        width:width,
        backgroundColor:'transparent',
        flexDirection:'row',
        justifyContent:'center',//内容居中
        alignItems:'center',
        position:'absolute',
        bottom:0,
    }
    ,
    number:{
        fontSize:38,
        color:"#fff",
        marginLeft:5,
    }
    ,



  	
});
module.exports=Main;

//AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
